<template>
	<view class="apply-pages" v-if="isLoad">
		<view class="fill-base mt-md">
			<view class="flex-y-center pt-lg pl-lg">
				<i class="iconfont icon-required c-warning"></i>
				<view class="item-text">农场头像</view>
			</view>
			<view class="flex-between ml-lg mr-lg pb-sm b-1px-b">
				<upload @upload="imgUpload" :imagelist="subForm.cover" imgtype="cover" text="添加封面" :imgsize="1">
				</upload>
			</view>
			<view class="flex-between ml-lg mr-lg">
				<view class="flex-y-center">
					<i class="iconfont icon-required c-warning"></i>
					<view class="item-text">农场名称</view>
				</view>
				<input v-model="subForm.title" type="text" class="item-input flex-1" maxlength="40"
					placeholder-class="c-placeholder" :placeholder="rule[1].errorMsg" />
			</view>
		</view>
		<view class="fill-base mt-md">
			<view class="ml-lg mr-lg b-1px-b">
				<view class="flex-y-center pt-lg pb-md">
					<i class="iconfont icon-required c-warning"></i>
					<view class="item-text">农场描述</view>
				</view>
				<textarea v-model="subForm.desc" type="text" class="item-textarea flex-1" maxlength="200"
					placeholder-class="c-placeholder" :placeholder="rule[2].errorMsg"></textarea>
			</view>
			<view class="flex-y-center pt-lg pl-lg">
				<i class="iconfont icon-required c-warning"></i>
				<view class="item-text">农场详情图</view>
			</view>
			<view class="flex-between ml-lg mr-lg pb-lg">
				<upload @upload="imgUpload" @del="imgUpload" :imagelist="subForm.imgs" imgtype="imgs" text="添加图片"
					:imgsize="9">
				</upload>
			</view>
		</view>
		<view class="fill-base mt-md">
			<view class="flex-between ml-lg mr-lg b-1px-b">
				<view class="flex-y-center">
					<i class="iconfont icon-required c-warning"></i>
					<view class="item-text">联系电话</view>
				</view>
				<input v-model="subForm.mobile" type="text" class="item-input flex-1" placeholder-class="c-placeholder"
					:placeholder="rule[4].errorMsg" />
			</view>
			<view class="flex-between ml-lg mr-lg b-1px-b">
				<view class="flex-y-center">
					<i class="iconfont icon-required c-warning"></i>
					<view class="item-text">农场地址</view>
				</view>
				<view class="item-input text flex-1">
					<view @tap.stop="toChooseLocation" class="flex-y-center">
						<view class="flex-1" style="line-height: 1.2;"
							:class="[{'c-placeholder':!subForm.address},{'c-title':subForm.address}]">
							{{subForm.address || `点击右边图标设置`}}
						</view><i class="iconfont icon-dingwei ml-sm" :style="{color:primaryColor}"></i>
					</view>
				</view>
			</view>
			<view class="flex-between ml-lg mr-lg b-1px-b">
				<view class="flex-y-center">
					<i class="iconfont icon-required c-warning"></i>
					<view class="item-text">姓名</view>
				</view>
				<input v-model="subForm.user_name" type="text" class="item-input flex-1" maxlength="20"
					placeholder-class="c-placeholder" :placeholder="rule[6].errorMsg" />
			</view>
			<view class="flex-between ml-lg mr-lg b-1px-b">
				<view class="flex-y-center">
					<i class="iconfont icon-required c-warning"></i>
					<view class="item-text">手机号</view>
				</view>
				<input v-model="subForm.phone" type="text" class="item-input flex-1" placeholder-class="c-placeholder"
					:placeholder="rule[7].errorMsg" />
			</view>
			<view class="flex-between ml-lg mr-lg">
				<view class="flex-y-center">
					<i class="iconfont icon-required c-warning"></i>
					<view class="item-text">身份证号</view>
				</view>
				<input v-model="subForm.idcard_code" type="text" class="item-input flex-1"
					placeholder-class="c-placeholder" :placeholder="rule[8].errorMsg" />
			</view>
		</view>
		<view class="fill-base mt-md">
			<view class="flex-y-center pt-lg pl-lg">
				<i class="iconfont icon-required c-warning"></i>
				<view class="item-text" style="width: 400rpx;">身份证正反面照片</view>
			</view>
			<view class="flex-between" style="width: 626rpx;margin: 0 auto;">
				<upload @upload="imgUpload" :imagelist="subForm.idcard_imgs" imgtype="idcard_imgs" imgclass="md"
					text="身份证正面照" :imgsize="1" bgimg="/static/image/farm/idcard.png"></upload>
				<upload @upload="imgUpload" :imagelist="subForm.idcard_imgs_fan" imgtype="idcard_imgs_fan" imgclass="md"
					text="身份证反面照" :imgsize="1" bgimg="/static/image/farm/idcard_fan.png"></upload>
			</view>
			<view class="flex-between pb-lg f-caption c-caption" style="width: 626rpx;margin: 0 auto;">
				<view class="flex-center" style="width: 292rpx;">身份证正面照</view>
				<view class="flex-center" style="width: 292rpx;">身份证反面照</view>
			</view>
		</view>

		<view class="space-max-footer"></view>

		<auth :needAuth="userInfo && !userInfo.nickname" :must="true" @go="submit">
			<fix-bottom-button :text="[{text:options.type==1?'保存':'提交申请',type:'confirm'}]" bgColor="#fff">
			</fix-bottom-button>
		</auth>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				isLoad: false,
				options: {},
				subForm: {
					id: 0,
					cover: [], // 农场头像
					title: '', //农场名称
					desc: '', // 简介
					imgs: [], // 详情
					mobile: '', //联系电话
					address: '', //农场地址
					lng: '',
					lat: '',
					user_name: '', //用户名称
					phone: '', //手机号
					idcard_code: '', //身份证号
					idcard_imgs: [], //身份证
					idcard_imgs_fan: []
				},
				rule: [{
						name: "cover",
						checkType: "isNotNull",
						errorMsg: "请上传农场头像"
					}, {
						name: "title",
						checkType: "isNotNull",
						errorMsg: "请输入您所拥有的农场名称",
						regType: 2
					}, {
						name: "desc",
						checkType: "isNotNull",
						errorMsg: "请输入农场描述",
						regType: 2
					}, {
						name: "imgs",
						checkType: "isNotNull",
						errorMsg: "请上传农场详情图"
					},
					{
						name: "mobile",
						checkType: "isAllPhone",
						errorMsg: "请输入农场联系电话",
						regText: "联系电话"
					}, {
						name: "address",
						checkType: "isNotNull",
						errorMsg: "请设置农场地址"
					}, {
						name: "user_name",
						checkType: "isNotNull",
						errorMsg: "请输入您的姓名",
						regType: 2
					},
					{
						name: "phone",
						checkType: "isMobile",
						errorMsg: "请输入您的手机号"
					}, {
						name: "idcard_code",
						checkType: "isIdCard",
						errorMsg: "请输入您的身份证号码"
					},
					{
						name: "idcard_imgs",
						checkType: "isNotNull",
						errorMsg: "请上传身份证正面照"
					},
					{
						name: "idcard_imgs_fan",
						checkType: "isNotNull",
						errorMsg: "请上传身份证反面照"
					}
				],
				lockTap: false
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
		}),
		async onLoad(options) {
			let {
				type = 0
			} = options
			this.options = options
			uni.setNavigationBarTitle({
				title: type == 1 ? `农场管理` : `申请农场主`
			})
			await this.initIndex()
			this.isLoad = true
		},
		methods: {
			...mapActions(['getUserInfo']),
			...mapMutations(['updateUserItem']),
			async initIndex() {
				let data = await this.$api.farmer.farmerInfo()
				if (!data.id) return
				data.cover = [{
					path: data.cover
				}]
				let arr = ['imgs', 'idcard_imgs']
				arr.map(item => {
					data[item] = data[item].map(aitem => {
						return {
							path: aitem
						}
					})
				})
				data.idcard_imgs_fan = [data.idcard_imgs[1]]
				data.idcard_imgs.splice(1, 2)
				for (let key in this.subForm) {
					this.subForm[key] = data[key]
				}
			},
			imgUpload(e) {
				let {
					imagelist,
					imgtype
				} = e;
				this.subForm[imgtype] = imagelist;
			},
			// 选择地区
			async toChooseLocation(e) {
				await this.$util.checkAuth({
					type: 'userLocation'
				})
				let [, {
					address = '',
					longitude,
					latitude
				} = {}] = await uni.chooseLocation();
				if (!address) return
				this.subForm.address = address
				this.subForm.lng = longitude
				this.subForm.lat = latitude
			},
			//表单验证
			validate(param) {
				let validate = new this.$util.Validate();
				this.rule.map(item => {
					let {
						name, 
					} = item
					validate.add(param[name], item);
				})
				let message = validate.start();
				console.log(message, "message");
				return message;
			},
			async submit() {
				let param = this.$util.deepCopy(this.subForm)
				let arr = ['cover', 'idcard_imgs', 'idcard_imgs_fan']
				arr.map(item => {
					param[item] = param[item].length > 0 ? param[item][0].path : ''
				})
				let msg = this.validate(param);
				if (msg) {
					this.$util.showToast({
						title: msg
					})
					return
				}
				param.imgs = param.imgs.map(item => {
					return item.path
				})
				param.idcard_imgs = [param.idcard_imgs, param.idcard_imgs_fan]
				delete param.idcard_imgs_fan
				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				let {
					type = 0
				} = this.options
				let methodModel = type == 1 ? 'farmerUpdate' : 'applyFarmer'
				try {
					await this.$api.farmer[methodModel](param)
					this.$util.hideAll()
					this.$util.showToast({
						title: type == 1 ? `修改成功` : `提交成功`
					});
					setTimeout(() => {
						this.$util.back()
						this.$util.goUrl({
							url: 1,
							openType: `navigateBack`
						})
					}, 1000)
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}

			}
		}
	}
</script>


<style lang="scss">
</style>
